import React, { useState } from 'react';
import { Form, Row, Col, Input, Button, Table, DatePicker } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

const { RangePicker } = DatePicker;

const AdvancedSearchForm = () => {
  const [expand, setExpand] = useState(false);
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  };

  const rangeConfig = {
    rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
  };

  return (
    <Form
      form={form}
      name="advanced_search"
      className="ant-advanced-search-form mb-20"
      onFinish={onFinish}
    >
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item
            name="name"
            label="姓名"
            rules={[
              {
                required: true,
                message: 'Input something!',
              },
            ]}
          >
            <Input placeholder="请输入姓名" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name="gender"
            label="性别"
          >
            <Input placeholder="请输入性别" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name="age"
            label="年龄"
          >
            <Input placeholder="请输入年龄" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name="position"
            label="职位"
          >
            <Input placeholder="请输入职位" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name="phone"
            label="电话"
          >
            <Input placeholder="请输入电话" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name="address"
            label="住址"
          >
            <Input placeholder="请输入住址" />
          </Form.Item>
        </Col>
        {
          expand && <>
            <Col span={10}>
              <Form.Item name="range-picker" label="起始时间" {...rangeConfig}>
                <RangePicker />
              </Form.Item>
            </Col>
          </>
        }
      </Row>
      <Row>
        <Col span={24} style={{ textAlign: 'right' }}>
          <Button type="primary" htmlType="submit">
            Search
          </Button>
          <Button
            style={{ margin: '0 8px' }}
            onClick={() => {
              form.resetFields();
            }}
          >
            Clear
          </Button>
          <span
            style={{ fontSize: 12 }}
            onClick={() => {
              setExpand(!expand);
            }}
          >
            {expand ? <UpOutlined /> : <DownOutlined />} Collapse
          </span>
        </Col>
      </Row>
    </Form>
  );
};

const ComplexTable = () => {

  const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      gender: '男',
      age: 32,
      position: '护士',
      phone: '18801086903',
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      gender: '男',
      age: 42,
      position: '护士',
      phone: '18801086903',
      address: '西湖区湖底公园1号',
    },
    {
      key: '3',
      name: '胡彦斌',
      gender: '男',
      age: 32,
      position: '护士',
      phone: '18801086903',
      address: '西湖区湖底公园1号',
    },
    {
      key: '4',
      name: '胡彦祖',
      gender: '男',
      age: 42,
      position: '护士',
      phone: '18801086903',
      address: '西湖区湖底公园1号',
    },
    {
      key: '5',
      name: '胡彦斌',
      gender: '男',
      age: 32,
      position: '护士',
      phone: '18801086903',
      address: '西湖区湖底公园1号',
    },
    {
      key: '6',
      name: '胡彦祖',
      gender: '男',
      age: 42,
      position: '护士',
      phone: '18801086903',
      address: '西湖区湖底公园1号',
    },
  ];

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (text: any, row: any, index: number)=>`${index+1}`
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender'
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age'
    },
    {
      title: '职位',
      dataIndex: 'position',
      key: 'position'
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone'
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address'
    },
    {
      title: '起始时间',
      dataIndex: 'rangepicker',
      key: 'rangepicker'
    }
  ];

  return (
    <>
      <AdvancedSearchForm />
      <Table dataSource={dataSource || []} columns={columns} pagination={
        {
          total: 100,
          showQuickJumper: true
        }
      }/>
    </>
  )
}

export default ComplexTable;
